<template>
  <div class="jobsArea">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple Tree">
          <!-- 树 -->
          <el-tree
            :data="TreeDataList"
            highlight-current
            :props="defaultProps"
            node-key="id"
            icon-class=" "
            default-expand-all
            :default-checked-keys="checkedKeys"
            :current-node-key="currentNodeKey"
            @node-click="handleNodeClick"
          >
            <!-- 树图标的插槽 -->
            <span slot-scope="{ node, data }">
              <i v-if="node.level===1" style="color: blue;" :class="node.expanded?'el-icon-folder-remove':'el-icon-folder-add'" />
              <i v-else-if="node.level===2" :class="node.expanded?'el-icon-remove-outline':'el-icon-circle-plus-outline'" />
              <i v-else class="" />
              {{ data.name }}
            </span>
          </el-tree>
        </div>
      </el-col>

      <el-col :span="20">
        <div class="grid-content bg-purple o-message">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="text">作业范围</span>
              <el-button style="float: right;background-color: #e15536;border: none; " type="primary">编辑</el-button>

            </div>

            <!-- 地图 -->
            <div class="demo-input-suffix">
              地区关键字：
              <el-input v-model="keyword" placeholder="请输入地区关键词" />
            </div>

            <div class="text item">
              <!-- 百度地图 -->
              <baidu-map
                :scroll-wheel-zoom="true"
                :zoom="zoom"
                class="map"
                :center="center"
              >

                <bm-polygon
                  :path="polygonPath"
                  stroke-color="#eec8cc"
                  :stroke-opacity="0.7"
                  :stroke-weight="1"
                  stroke-style="dashed"
                  fill-color="#eec8cc"
                  :editing="mapEdit"
                  @lineupdate="updatePolygonPath"
                />
                <bm-local-search :keyword="keyword" :auto-viewport="true" />
              </baidu-map>
            </div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getTreeApi, getScopeApi } from '@/api/organizationManage'
export default {
  data() {
    return {
      // 搜索的key
      keyword: '',
      // 百度地图坐标
      center: { lng: 0, lat: 0 },
      // 缩放
      zoom: 11.5,
      // 区域图
      polygonPath: [],
      // 折线图编辑
      mapEdit: false,
      // 是否编辑
      isEdit: false,
      // 搜索地区
      location: '',
      // 树状图的列表
      TreeDataList: [],
      // 修改树状图label为name
      defaultProps: {
        label: 'name',
        children: 'children'
      },
      // 当前高亮的树节点 id
      currentNodeKey: 1,
      checkedKeys: []
    }
  },
  created() {
    // 获取树信息
    this.getTreeList()
    const storedNodeKey = localStorage.getItem('selectedNodeKey1')
    if (storedNodeKey) {
      // 在本地存储中存在节点信息时，设置初始选中节点和高亮节点
      this.checkedKeys = [storedNodeKey]
      this.currentNodeKey = storedNodeKey
      this.handleNodeClick({ id: this.currentNodeKey })
    }
  },
  methods: {
    // 获取树状机构信息
    async getTreeList() {
      const res = await getTreeApi()
      // console.log(res)
      this.TreeDataList = JSON.parse(res.data)
    },
    // 点数树拿到数据
    async handleNodeClick(data) {
      console.log(data.id)
      const res = await getScopeApi(data.id)
      // 存储到本地
      localStorage.setItem('selectedNodeKey1', data.id)
      // console.log(res.data.polygon)
      this.center.lng = res.data.longitude
      this.center.lat = res.data.latitude
      this.polygonPath = res.data.polygon?.map(v => ({ lng: v.longitude, lat: v.latitude }))
      // console.log(this.polygonPath)
    },
    // 编辑触发
    editMap() {
      this.mapEdit = true
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
    },
    addPolygonPoint() {
      this.polygonPath.push({ lng: 116.404, lat: 39.915 })
    },
    // 取消地图编辑
    cancelMapEdit() {
      // 关闭地图的编辑状态
      this.mapEditing = false
      // 关闭编辑状态
      this.isEdit = false
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 700px;
}
.jobsArea{
  margin:0 20px;
}
.el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple {
    background: #fff;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .Tree{
    min-height: 800px;
    padding: 15px;
  }
   .o-message{
    min-height: 200px;
  }
  .el-card{
    padding: 0 20px;
  }
  .demo-input-suffix{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .el-input{
    width: 250px;
    }
    .clearfix{
      display: flex;
      font-size: 18px;
      font-weight: bold;
      justify-content:space-between;
      align-items: center;
    }
    .text{
      flex: 1;
    }
</style>
